<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-config-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="config-navigation">
                    <form style="width: 100%;" action="/configSpaces">
                        <div class="input-group no-border">
                            <input type="text" name="keyword" class="form-control" placeholder="Search...">
                            <input type="hidden" name="envName" id="env_name_elem" th:value="${envName}"/>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb my-breadcrumb">
                        <li class="breadcrumb-item"><a href="/configs">环境列表</a></li>
                        <li class="breadcrumb-item active" th:text="${envName}"></li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-chart">
                        <div class="card-header">
                            <h5 class="card-title">配置空间列表</h5>
                            <div class="dropdown">
                                <button type="button"
                                        class="btn btn-round btn-icon dropdown-toggle btn-outline-default no-caret"
                                        data-toggle="dropdown">
                                    <i class="now-ui-icons loader_gear"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#" data-toggle="modal"
                                       data-target="#create_space_modal">新建空间</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="text-primary">
                                    <tr>
                                        <th>#</th>
                                        <th>空间名称</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="space, itStat : ${datas}">
                                        <td th:text="${itStat.index + 1}"></td>
                                        <td th:text="${space}"></td>
                                        <td>
                                            <button type="button" rel="tooltip" title="Key列表"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-space=${space}"
                                                    onclick="goto_config_keys(this)">
                                                <i class="now-ui-icons design_bullet-list-67"></i>
                                            </button>
                                            <button type="button" rel="tooltip" title="拷贝到新空间"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-space=${space}"
                                                    onclick="copy_to_new_space(this)">
                                                <i class="now-ui-icons files_single-copy-04"></i>
                                            </button>
                                            <button type="button" rel="tooltip" title="删除"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-space=${space}"
                                                    onclick="delete_space(this)">
                                                <i class="now-ui-icons ui-1_simple-remove"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="create_space_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header justify-content-center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="now-ui-icons ui-1_simple-remove"></i>
                </button>
                <h4 class="title title-up">新建空间</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="space_name_elem">名称:</label>
                                <input type="text" class="form-control" id="space_name_elem"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="save_space_name();">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="copyto_space_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header justify-content-center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="now-ui-icons ui-1_simple-remove"></i>
                </button>
                <h4 class="title title-up">拷贝到新空间</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="old_env_name_elem">老环境名称:</label>
                                <input type="text" class="form-control" readonly id="old_env_name_elem"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="old_space_name_elem">老空间名称:</label>
                                <input type="text" class="form-control" readonly id="old_space_name_elem"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="new_env_name_elem">新环境名称:</label>
                                <input type="text" class="form-control" id="new_env_name_elem"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="new_space_name_elem">新空间名称:</label>
                                <input type="text" class="form-control" id="new_space_name_elem"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="save_copy_to();">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>

    function save_copy_to() {
        var oldEnv = $("#old_env_name_elem").val();
        var oldSpace = $("#old_space_name_elem").val();
        var newEnv = $("#new_env_name_elem").val();
        var newSpace = $("#new_space_name_elem").val();
        if (!newEnv || !newSpace) {
            antrpc_console.showNotification("环境与空间名称不能为空", {
                "color": "danger"
            });
            return;
        }
        $.ajax({
            url: "/config/copyToNewSpace",
            type: "POST",
            dataType: "JSON",
            data: {
                "oldEnvName": oldEnv,
                "oldSpaceName": oldSpace,
                "newEnvName": newEnv,
                "newSpaceName": newSpace
            },
            success: function (response) {
                if (response.code === 2000) {
                    antrpc_console.showNotification("拷贝成功!");
                } else {
                    antrpc_console.showNotification(response.message, {
                        "color": "danger"
                    });
                }
                window.setTimeout(function () {
                    window.location.reload();
                }, 1000);
            }
        });
    }

    function copy_to_new_space(btn) {
        var oldSpaceName = $(btn).attr("data-space");
        var oldEnv = $("#env_name_elem").val();
        $("#old_env_name_elem").val(oldEnv);
        $("#old_space_name_elem").val(oldSpaceName);
        $("#copyto_space_modal").modal("show");
    }

    function goto_config_keys(btn) {
        window.location.href = "/configKeys?envName=" + $("#env_name_elem").val() + "&spaceName=" + $(btn).attr("data-space");
    }

    function delete_space(btn) {
        var envName = $("#env_name_elem").val();
        var spaceName = $(btn).attr("data-space");
        $.ajax({
            url: "/config/deleteSpace",
            type: "POST",
            data: {
                "envName": envName,
                "spaceName": spaceName
            },
            dataType: "JSON",
            success: function (response) {
                if (response.code === 2000) {
                    antrpc_console.showNotification("删除成功!");
                } else {
                    antrpc_console.showNotification(response.message, {
                        "color": "danger"
                    });
                }
                window.setTimeout(function () {
                    window.location.reload();
                }, 1000);
            }
        });
    }

    function save_space_name() {
        var envName = $("#env_name_elem").val();
        var spaceName = $.trim($("#space_name_elem").val());
        if (!spaceName) {
            antrpc_console.showNotification("空间名称不能为空!");
            return;
        }
        $.ajax({
            url: "/config/saveSpace",
            type: "POST",
            data: {
                "envName": envName,
                "spaceName": spaceName
            },
            dataType: "JSON",
            success: function (response) {
                if (response.code === 2000) {
                    antrpc_console.showNotification("保存成功");
                    $("#create_space_modal").modal("hide");
                    window.setTimeout(function () {
                        window.location.reload();
                    }, 1000);
                } else {
                    antrpc_console.showNotification(response.message, {
                        "color": "danger"
                    });
                }
            }
        })
    }

    $(document).ready(function () {
        $("#config_list_li").addClass("active");

        $("#copyto_space_modal").on("hidden.bs.modal", function () {
            $("#old_env_name_elem").val("");
            $("#old_space_name_elem").val("");
        });
    });

</script>
</body>
</html>